<template>
    <f7-page class="feeling-edit">
        <f7-navbar>
            <f7-nav-left back-link=" " sliding></f7-nav-left>
            <f7-nav-center>发布心情</f7-nav-center>
            <f7-nav-right>
                <f7-link href="/news/detail/">发布</f7-link>
            </f7-nav-right>
        </f7-navbar>
        <div class="main">
            <f7-list form>
                <f7-list-item>
                    <f7-input type="textarea" placeholder="请输入内容" value="据说几天的天气非常的不错！！！" class="content"></f7-input>
                </f7-list-item>
                <f7-list-item>
                    <f7-grid class="photo-list">
                        <f7-col class="col">
                            <div class="img-wrap">
                                <img src="../../assets/images/test.jpg">
                            </div>
                        </f7-col>
                        <f7-col class="col">
                            <div class="img-wrap">
                                <img src="../../assets/images/test.jpg">
                            </div>
                        </f7-col class="col">
                        <f7-col class="col">
                            <f7-link icon-fa="plus-square-o" class="uploader" @click="openUploadPhotoAction"></f7-link>
                        </f7-col>
                    </f7-grid>
                </f7-list-item>
            </f7-list>
            <div class="share-to-circle">
                <p>推送到圈子</p>
                <ul>
                    <li>
                        <f7-button round fill class="on">公开</f7-button>
                    </li>
                    <li>
                        <f7-button round fill>高中圈</f7-button>
                    </li>
                    <li>
                        <f7-button round fill>专业奶爸圈</f7-button>
                    </li>
                    <li>
                        <f7-button round fill>不可告人圈</f7-button>
                    </li>
                    <li>
                        <f7-button round fill>不公开</f7-button>
                    </li>
                </ul>
            </div>
        </div>

        <f7-actions id="uploadPhoto" :opened="uploadPhotoActionState" @actions:closed="changeuploadPhotoState">
            <f7-actions-group>
                <f7-actions-button>拍照</f7-actions-button>
                <f7-actions-button @click="openImgAlbum">从手机相册选择</f7-actions-button>
            </f7-actions-group>
            <f7-actions-group>
                <f7-actions-button>取消</f7-actions-button>
            </f7-actions-group>
        </f7-actions>

        <f7-popup id="imgAlbum" :opened="imgAlbumState" @popup:closed="changeImgAlbumState">
            <f7-view navbar-fixed>
                <f7-pages>
                    <f7-page toolbar-through>
                        <f7-navbar>
                            <f7-nav-left sliding>
                                <f7-link icon-fa="close" @click="closeImgAlbum"></f7-link>
                            </f7-nav-left>
                            <f7-nav-center>相机胶卷</f7-nav-center>
                        </f7-navbar>
                        <div class="main img-album">
                            <f7-grid no-gutter>
                                <f7-col>
                                    <div class="img-wrap" @click="select($event)">
                                        <img src="../../assets/images/test.jpg">
                                        <f7-icon fa="circle-o"></f7-icon>
                                    </div>
                                </f7-col>
                                <f7-col>
                                    <div class="img-wrap" @click="select($event)">
                                        <img src="../../assets/images/test.jpg">
                                        <f7-icon fa="circle-o"></f7-icon>
                                    </div>
                                </f7-col>
                                <f7-col>
                                    <div class="img-wrap" @click="select($event)">
                                        <img src="../../assets/images/test.jpg">
                                        <f7-icon fa="circle-o"></f7-icon>
                                    </div>
                                </f7-col>
                                <f7-col>
                                    <div class="img-wrap" @click="select($event)">
                                        <img src="../../assets/images/test.jpg">
                                        <f7-icon fa="circle-o"></f7-icon>
                                    </div>
                                </f7-col>
                            </f7-grid>
                            <f7-grid no-gutter>
                                <f7-col>
                                    <div class="img-wrap" @click="select($event)">
                                        <img src="../../assets/images/test.jpg">
                                        <f7-icon fa="circle-o"></f7-icon>
                                    </div>
                                </f7-col>
                                <f7-col>
                                    <div class="img-wrap" @click="select($event)">
                                        <img src="../../assets/images/test.jpg">
                                        <f7-icon fa="circle-o"></f7-icon>
                                    </div>
                                </f7-col>
                                <f7-col>
                                    <div class="img-wrap" @click="select($event)">
                                        <img src="../../assets/images/test.jpg">
                                        <f7-icon fa="circle-o"></f7-icon>
                                    </div>
                                </f7-col>
                                <f7-col>
                                    <div class="img-wrap" @click="select($event)">
                                        <img src="../../assets/images/test.jpg">
                                        <f7-icon fa="circle-o"></f7-icon>
                                    </div>
                                </f7-col>
                            </f7-grid>
                            <f7-grid no-gutter>
                                <f7-col>
                                    <div class="img-wrap" @click="select($event)">
                                        <img src="../../assets/images/test.jpg">
                                        <f7-icon fa="circle-o"></f7-icon>
                                    </div>
                                </f7-col>
                                <f7-col>
                                    <div class="img-wrap" @click="select($event)">
                                        <img src="../../assets/images/test.jpg">
                                        <f7-icon fa="circle-o"></f7-icon>
                                    </div>
                                </f7-col>
                                <f7-col>
                                    <div class="img-wrap" @click="select($event)">
                                        <img src="../../assets/images/test.jpg">
                                        <f7-icon fa="circle-o"></f7-icon>
                                    </div>
                                </f7-col>
                                <f7-col>
                                    <div class="img-wrap" @click="select($event)">
                                        <img src="../../assets/images/test.jpg">
                                        <f7-icon fa="circle-o"></f7-icon>
                                    </div>
                                </f7-col>
                            </f7-grid>
                            <f7-grid no-gutter>
                                <f7-col>
                                    <div class="img-wrap" @click="select($event)">
                                        <img src="../../assets/images/test.jpg">
                                        <f7-icon fa="circle-o"></f7-icon>
                                    </div>
                                </f7-col>
                                <f7-col>
                                    <div class="img-wrap" @click="select($event)">
                                        <img src="../../assets/images/test.jpg">
                                        <f7-icon fa="circle-o"></f7-icon>
                                    </div>
                                </f7-col>
                                <f7-col>
                                    <div class="img-wrap" @click="select($event)">
                                        <img src="../../assets/images/test.jpg">
                                        <f7-icon fa="circle-o"></f7-icon>
                                    </div>
                                </f7-col>
                                <f7-col>
                                    <div class="img-wrap" @click="select($event)">
                                        <img src="../../assets/images/test.jpg">
                                        <f7-icon fa="circle-o"></f7-icon>
                                    </div>
                                </f7-col>
                            </f7-grid>
                            <f7-grid no-gutter>
                                <f7-col>
                                    <div class="img-wrap" @click="select($event)">
                                        <img src="../../assets/images/test.jpg">
                                        <f7-icon fa="circle-o"></f7-icon>
                                    </div>
                                </f7-col>
                                <f7-col>
                                    <div class="img-wrap" @click="select($event)">
                                        <img src="../../assets/images/test.jpg">
                                        <f7-icon fa="circle-o"></f7-icon>
                                    </div>
                                </f7-col>
                                <f7-col>
                                    <div class="img-wrap" @click="select($event)">
                                        <img src="../../assets/images/test.jpg">
                                        <f7-icon fa="circle-o"></f7-icon>
                                    </div>
                                </f7-col>
                                <f7-col>
                                    <div class="img-wrap" @click="select($event)">
                                        <img src="../../assets/images/test.jpg">
                                        <f7-icon fa="circle-o"></f7-icon>
                                    </div>
                                </f7-col>
                            </f7-grid>
                            <f7-grid no-gutter>
                                <f7-col>
                                    <div class="img-wrap" @click="select($event)">
                                        <img src="../../assets/images/test.jpg">
                                        <f7-icon fa="circle-o"></f7-icon>
                                    </div>
                                </f7-col>
                                <f7-col>
                                    <div class="img-wrap" @click="select($event)">
                                        <img src="../../assets/images/test.jpg">
                                        <f7-icon fa="circle-o"></f7-icon>
                                    </div>
                                </f7-col>
                                <f7-col>
                                    <div class="img-wrap" @click="select($event)">
                                        <img src="../../assets/images/test.jpg">
                                        <f7-icon fa="circle-o"></f7-icon>
                                    </div>
                                </f7-col>
                                <f7-col>
                                    <div class="img-wrap" @click="select($event)">
                                        <img src="../../assets/images/test.jpg">
                                        <f7-icon fa="circle-o"></f7-icon>
                                    </div>
                                </f7-col>
                            </f7-grid>
                            <f7-grid no-gutter>
                                <f7-col>
                                    <div class="img-wrap" @click="select($event)">
                                        <img src="../../assets/images/test.jpg">
                                        <f7-icon fa="circle-o"></f7-icon>
                                    </div>
                                </f7-col>
                                <f7-col>
                                    <div class="img-wrap" @click="select($event)">
                                        <img src="../../assets/images/test.jpg">
                                        <f7-icon fa="circle-o"></f7-icon>
                                    </div>
                                </f7-col>
                                <f7-col>
                                    <div class="img-wrap" @click="select($event)">
                                        <img src="../../assets/images/test.jpg">
                                        <f7-icon fa="circle-o"></f7-icon>
                                    </div>
                                </f7-col>
                                <f7-col>
                                    <div class="img-wrap" @click="select($event)">
                                        <img src="../../assets/images/test.jpg">
                                        <f7-icon fa="circle-o"></f7-icon>
                                    </div>
                                </f7-col>
                            </f7-grid>
                            <f7-grid no-gutter>
                                <f7-col>
                                    <div class="img-wrap" @click="select($event)">
                                        <img src="../../assets/images/test.jpg">
                                        <f7-icon fa="circle-o"></f7-icon>
                                    </div>
                                </f7-col>
                                <f7-col>
                                    <div class="img-wrap" @click="select($event)">
                                        <img src="../../assets/images/test.jpg">
                                        <f7-icon fa="circle-o"></f7-icon>
                                    </div>
                                </f7-col>
                                <f7-col>
                                    <div class="img-wrap" @click="select($event)">
                                        <img src="../../assets/images/test.jpg">
                                        <f7-icon fa="circle-o"></f7-icon>
                                    </div>
                                </f7-col>
                                <f7-col>
                                    <div class="img-wrap" @click="select($event)">
                                        <img src="../../assets/images/test.jpg">
                                        <f7-icon fa="circle-o"></f7-icon>
                                    </div>
                                </f7-col>
                            </f7-grid>
                        </div>

                        <f7-toolbar>
                            <f7-link icon-fa="eye" text="" @click="openPhotoBrowser"></f7-link>
                            <f7-link icon-fa="check" text="" @click="closeImgAlbum"></f7-link>
                        </f7-toolbar>
                    </f7-page>
                </f7-pages>
            </f7-view>
        </f7-popup>

        <f7-popup id="photoBrowser" :opened="photoBrowserState" @popup:closed="closephotoBrowserState">
            <f7-view navbar-fixed>
                <f7-pages>
                    <f7-page toolbar-through class="my-photo-browser">
                        <f7-navbar>
                            <f7-nav-left sliding>
                                <f7-link icon-fa="close" @click="closephotoBrowserState"></f7-link>
                            </f7-nav-left>
                            <f7-nav-center>图片预览</f7-nav-center>
                            <f7-nav-right>

                            </f7-nav-right>
                        </f7-navbar>
                        <div class="main">
                            <f7-swiper class="swiper-main">
                                <f7-swiper-slide>
                                    <img src="../../assets/images/test.jpg">
                                </f7-swiper-slide>
                                <f7-swiper-slide>
                                    <img src="../../assets/images/test.jpg">
                                </f7-swiper-slide>
                                <f7-swiper-slide>
                                    <img src="../../assets/images/test.jpg">
                                </f7-swiper-slide>
                                <f7-swiper-slide>
                                    <img src="../../assets/images/test.jpg">
                                </f7-swiper-slide>
                            </f7-swiper>
                            <f7-swiper :params="{slidesPerView: 4, spaceBetween: 10}" class="sub-swiper">
                                <f7-swiper-slide>
                                    <img src="../../assets/images/test.jpg">
                                </f7-swiper-slide>
                                <f7-swiper-slide>
                                    <img src="../../assets/images/test.jpg">
                                </f7-swiper-slide>
                                <f7-swiper-slide>
                                    <img src="../../assets/images/test.jpg">
                                </f7-swiper-slide>
                                <f7-swiper-slide>
                                    <img src="../../assets/images/test.jpg">
                                </f7-swiper-slide>
                            </f7-swiper>
                        </div>

                        <f7-button class="btn-complete" @click="closephotoBrowserState();closeImgAlbum()">完成</f7-button>
                    </f7-page>
                </f7-pages>
            </f7-view>
        </f7-popup>
    </f7-page>
</template>

<style lang="scss">
    .feeling-edit {
        form {
            &.list-block {
                margin: 0;
            }
        }

        .photo-list {
            .col {
                min-width: 85px;
            }

            .img-wrap {
                width: 80px;
                height: 80px;
                overflow: hidden;
            }

            img {
                display: block;
                width: 100%;
                height: 100%;
            }

            .uploader {
                .icon {
                    margin-top: -8px;
                    font-size: 105px;
                }
            }
        }

        .share-to-circle {
            padding: 0 15px;
            background: #eaeaf1;
            overflow: hidden;
            border-bottom: 0.5px solid #c8c7cc;

            p {
                margin: 10px 5px;
                font-size: 15px;
            }
        }
    }

    .my-photo-browser {
        background: #000;

        .swiper-main {
            padding: 30px 0;

            .swiper-slide {
                overflow: hidden;

                img {
                    display: block;
                    width: 100%;
                }
            }
        }

        .sub-swiper {
            .swiper-slide {
                // width: 25%;
                overflow: hidden;

                img {
                    display: block;
                    width: 100%;
                }
            }
        }

        .btn-complete {
            position: absolute;
            left: 15px;
            right: 15px;
            bottom: 15px;
            background: #fff;
        }
    }
</style>
<script>
    export default {
        data() {
            return {
                uploadPhotoActionState: false, // 上传图片action状态判断
                imgAlbumState: false,
                photoBrowserState: false
            }
        },
        methods: {
            changeuploadPhotoState() {
                this.uploadPhotoActionState = false
            },
            openUploadPhotoAction() {
                this.uploadPhotoActionState = true
            },
            changeImgAlbumState() {
                this.imgAlbumState = false
            },
            openImgAlbum() {
                this.imgAlbumState = true
            },
            closeImgAlbum() {
                this.imgAlbumState = false
            },
            select(e) {
                this.$$(e.target.offsetParent).find('.icon').toggleClass('fa-circle-o').toggleClass('fa-check-circle-o')
            },
            closephotoBrowserState() {
                this.photoBrowserState = false
            },
            openPhotoBrowser() {
                this.photoBrowserState = true
            }
        }
    }
</script>